<template>
	<div class="nav">
		<van-nav-bar title="验证码登录" left-arrow @click-left="onClickLeft" />
		<div class="pic"><img src="../../public/images/login/login.png"></div>
		<div class="m-32">
			 <div class="img"><img src=""></div>
		</div>
		<div class="m-32 phone b_line mt-90 pb-20"><img src="../../public/images/login/phone.png"><input type="text" placeholder="请输入手机号" v-model="info.phone"></div>
		<div class="m-32 password b_line mt-30 pb-20"><img src="../../public/images/login/code.png"><input type="text" placeholder="请输入验证码" v-model="info.code">
			<td-timer class="setCode"  @click.native="sendVCode" :disabled="disabled" ref="sendCode" :second="second"></td-timer>
		</div>

		<div class="m-32 mt-80"><van-button size="large" :class="class_login ?'btn_1' :'btn_2'" @click='login()' :disabled='btn_disabled'>登录</van-button></div>
	</div>
</template>

<script>
	import storage from '@/common/store'
	export default {
		data() {
			return {
				info:{},
				disabled: false,
				second:60,
				class_login:false,			//按钮颜色设置
				btn_disabled:true			//按钮是否可以点击
			}
		},
		watch:{
			'info.code':{
				handler: function (val) {
					if(val && this.info.phone){
						this.class_login=false;
						this.btn_disabled=false;
					}else{
						this.class_login=true;
						this.btn_disabled=true;
					}
				},
     			 immediate: true
			}
		},
		created() {
		},
		methods: {
			onClickLeft: function() {
				this.$router.push({path:'/login'});
			},
			login(){
        		var that=this;
				this.$post(this.$api.user.login,{phoneNumber:this.info.phone,verifyCode:this.info.code}).then(data=>{
					storage.setCookie(data.data.campus_token); 
					this.$toast.success('登录成功');
					setTimeout(function(){
						that.$router.push({path:'/'});
					},1000);
				})
			},
			sendVCode:function(){
				if(!this.info.phone){
					this.$toast("请您输入手机号");
					return ;
				}
				this.$get(this.$api.sms+'/'+this.info.phone+'/get').then(data=>{
					this.send()
					this.$toast.success('发送成功');
				})
			},
			send() {
	            this.disabled = true;
	            setTimeout(this.sended, 1000);
	        },
	        sended() {
	              this.$refs.sendCode.run();
	              this.disabled = false;
	        },
		}
	}
</script>

<style scoped="scoped">
	.pic {height: 2.8rem;}
	.pic img {width: 100%;height: 100%;}
	input{border: none;outline: none;line-height: 0.6rem;font-size:0.26rem;float: left;}
	.phone{height: 0.6rem;display: flex;justify-content: flex-start;}
	.phone img{display: block;width: 0.6rem;height: 0.6rem;}
	.password{height: 0.6rem;}
	.password img{display: block;width: 0.6rem;height: 0.6rem;}
	.password img:nth-of-type(1){float: left;}
	.btn_1{height: 0.98rem;background-color: #E2E2E2;color: #BEBEBE;font-size: 0.32rem;}
	.btn_2{height: 0.98rem;background-color: #31B826;color: #FFFFFF;font-size: 0.32rem;}
	.password .setCode{float: right;}
</style>
